<template>
  <div class="app">
    <div class="header">
        <h2>饿了么</h2>
        <span @click="hand(index)" :class="{active:arrindex==index}" v-for="(item,index) in title" :key="index">{{item}}</span>
    </div>
    <div class="good" v-for="(item,index) in good" :key="index">
        <div class="left">
            <img src="../assets/good1.webp" alt="">
        </div>
        <div class="right">
            <p>{{item.title}}</p>
            <p>{{item.name}}</p>
            <p>{{item.little}}</p>
            <span>￥{{item.price}}</span>
            <button>{{item.go}}</button>
        </div>
    </div>
  </div>
 
</template>

<script>
export default {
data(){
    return {
        arrindex:0,
        title:["全部","待消费","待评价","退款"],
        good:[
            {
title:"汉堡王|新天地餐厅",
name:"买1送1明星黄堡|用心火烤 肉质紧实 鲜嫩多汁",

price:25,
oldprice:50,

go:"再来一单"

            },
            {
title:"华莱士|长治路店",
name:"华莱士|聚划算单人套餐|进店必选",

price:12.2,
oldprice:31.2,
num:173,
go:"再来一单"

            },
            {
title:"贡天下山西特产|高新店",
name:"白老大小米果仁酥200g【爆爆团】",

price:30,
oldprice:89.6,
num:160,
go:"再来一单"
            }
        ]
    }
}
}
</script>

<style lang="scss" scoped>

.header h2 {
    text-align: center;
    margin-bottom: 30px;
}
.header span {
    padding: 4px 10px;

}
.active {
    font-weight: bold;
    font-size: 17px;
    border-bottom: 3px solid skyblue;
}
.good{
    width: 90%;
    height: 167px;
    margin: 0 5%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}
.left {
    float: left;
}
.right {
    float:left;
    margin-left: 10px;
}
.left img {
    width: 97px;
    height: 126px;
}
.right p:nth-child(1){
    color: #999;
    padding: 4px 0;
    width: 200px;
}
.right p:nth-child(2){
    font-size: 18px;
    font-weight: bold;
    width: 200px;
    word-wrap: break-word;
}
.right p:nth-child(3){
    color: red;
    color: 14px;
}
.right span:nth-child(4){
    color: red;
    font-weight: bold;
    font-size: 18px;
}
.right button:nth-child(5){
    background: rgb(255, 255, 255);
    color: rgb(47, 185, 240);
    border: 1px solid skyblue;
    outline: none;
    height: 30px;
    border-radius:30px ;
    width: 98px;
    text-align: center;
    margin-left:50px ;
}
.right p:nth-child(6) span:nth-child(1){
    color: #999;
    font-size: 13px;
}
.right p:nth-child(6) span:nth-child(2){
    margin-left: 87px;
    color: crimson;
    font-size: 13px;
}
</style>